<template>
	<div class="home">
		<!-- 搜索框 -->
		<van-search v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />
		<!-- 滚动导航栏 -->
		<van-tabs v-model="active" @click="swichTab">
			<van-tab v-for="(item,index) in nav" :key="item._id" :title="item.name">

			</van-tab>
		</van-tabs>
		<!-- 自定义宫格 -->
		<div class="xian">
		</div>
		<div class="ban" v-for="(item,index) in artlist" :key="item._id">
			<p>{{item.title}}</p>
			<van-grid :border="false" :column-num="3">
				<van-grid-item>
					<img :src="item.imageSrc" />
				</van-grid-item>
				</van-grid>
				<h6>{{item.author}}评论</h6>
		</div>


		<!-- <p>新增一条交通路线s</p>
			<van-grid :border="false" :column-num="3">
				<van-grid-item>
					<img src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
				</van-grid-item>
				<van-grid-item>
					<img src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
				</van-grid-item>
				<van-grid-item>
					<img src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
				</van-grid-item>
				<van-grid-item>
					<img src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
				</van-grid-item>
				<van-grid-item>
					<img src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
				</van-grid-item>
			</van-grid>
			<h6>小王2评论2021-04-22</h6>
		</div>
		<div class="xian">

		</div>
		<div class="ban">
			<p>新增一条交通路线s</p>
			<van-grid :border="false" :column-num="1">
				<van-grid-item>
					<img src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
				</van-grid-item>
			</van-grid>
			<h6>小王2评论2021-04-22</h6>
		</div> -->
		<div class="di">
			<van-tabbar v-model="active" route>
				<van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
				<van-tabbar-item icon="add-o" to="publish">发布</van-tabbar-item>
				<van-tabbar-item icon="manager-o" to="myview">我的</van-tabbar-item>
			</van-tabbar>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'HomeView',
		data() {
			return {
				value: "搜索",

				nav: [
					// "本地头条",
					// "招聘求职",
					// "二手置换",
					// "房屋出租",
					// "生意转让",
					// "婚恋交友"
				],
				artlist: [

				],

				active: 0,
				icon: {
					active: 'https://img01.yzcdn.cn/vant/user-active.png',
					inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
				}
			}
		},
		mounted() {
			this.getCateList()
		},
		methods: {
			getCateList() {
				this.$http.post('/api/get_cate_list').then(res => {
					console.log(res)
					this.nav = res.data.data
					this.active_cate_id = this.nav[this.active]._id;
					this.getArticleList();
				})
			},
			getArticleList() {
				this.$http.post('/api/get_article_list', {
					cate_id: this.active_cate_id
				}).then(res => {
					console.log(res)
					this.artlist = res.data.data
				})
			},
			swichTab() {
				this.active_cate_id = this.nav[this.active]._id;
				this.getArticleList();
			}


		}
	}
</script>

<style scoped lang="less">
	.van-tabs--line ::v-deep .van-tabs_line {
		background-color: #4fc08d;
	}

	.ben img {
		width: 100%;
	}

	.ben p {
		text-align: left;
	}

	.ben h6 {
		text-align: left;
		color: #b3b3b3;
	}

	.ban img {
		width: 100%;
	}

	.ban p {
		text-align: left;
	}

	.ban h6 {
		text-align: left;
		color: #B3B3B3;
	}

	.xian {
		border: 1px solid #d8d8d8;
	}

	.van-tabs {
		border: 1px solid #DCDCDC;
	}
	
</style>
